<template>
  <div id="app" style="height: 100vh; margin: 0; overflow: hidden;">
    <canvas ref="canvas" class="webgl-canvas"></canvas>
    <div class="controls">
      <button @click="startLottery">开始抽奖</button>
      <button @click="stopLottery">停止抽奖</button>
      <div v-if="winner" class="winner">恭喜抽到：{{ winner }}</div>
      <div class="prizes">
        <h2>奖品列表：</h2>
        <ul>
          <li v-for="(prize, index) in prizes" :key="index">{{ prize }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import * as THREE from 'three';

export default {
  data() {
    return {
      rotateSpeed: 0.01,
      prizeList: ['iPhone', 'MacBook', 'AirPods', 'TV', 'Voucher'],
      winner: '',
      prizes: ['iPhone', 'MacBook', 'AirPods', 'TV', 'Voucher'],
    };
  },
  methods: {
    startLottery() {
      this.rotateSpeed = 0.05;  // 启动球体旋转
      this.winner = '';  // 清空之前的中奖者
    },
    stopLottery() {
      this.rotateSpeed = 0;  // 停止球体旋转
      this.pickWinner();  // 抽取幸运儿
    },
    pickWinner() {
      const randomIndex = Math.floor(Math.random() * this.prizes.length);
      this.winner = this.prizes[randomIndex];
    },
    initScene() {
      // 创建基础场景
      this.scene = new THREE.Scene();
      this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      this.renderer = new THREE.WebGLRenderer({ canvas: this.$refs.canvas });
      this.renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(this.renderer.domElement);

      // 创建球体
      const geometry = new THREE.SphereGeometry(5, 32, 32);
      const material = new THREE.MeshStandardMaterial({ color: 0x00ff00, wireframe: true });
      this.sphere = new THREE.Mesh(geometry, material);
      this.scene.add(this.sphere);

      // 添加环境光和点光源
      const ambientLight = new THREE.AmbientLight(0x404040);
      const pointLight = new THREE.PointLight(0xffffff, 1, 100);
      pointLight.position.set(0, 10, 20);
      this.scene.add(ambientLight, pointLight);

      // 设置相机位置
      this.camera.position.z = 20;

      // 初始化粒子效果（星星坠落）
      this.initParticles();
    },
    initParticles() {
      // 创建星星的粒子系统
      const particleCount = 1000;
      const particles = new THREE.BufferGeometry();
      const positions = new Float32Array(particleCount * 3);

      for (let i = 0; i < particleCount; i++) {
        positions[i * 3] = (Math.random() - 0.5) * 2000;
        positions[i * 3 + 1] = (Math.random() - 0.5) * 2000;
        positions[i * 3 + 2] = (Math.random() - 0.5) * 2000;
      }

      particles.setAttribute('position', new THREE.BufferAttribute(positions, 3));

      const material2 = new THREE.PointsMaterial({ color: 0xffffff, size: 2, sizeAttenuation: true });
      this.particleSystem = new THREE.Points(particles, material2);
      this.scene.add(this.particleSystem);
    },
    animateParticles() {
      const positions = this.particleSystem.geometry.attributes.position.array;

      for (let i = 1; i < positions.length; i += 3) {
        positions[i] -= Math.random() * 0.5;
        if (positions[i] < -1000) positions[i] = 1000;
      }

      this.particleSystem.geometry.attributes.position.needsUpdate = true;
    },
    animate() {
      requestAnimationFrame(this.animate);
      this.sphere.rotation.x += this.rotateSpeed;
      this.sphere.rotation.y += this.rotateSpeed;
      this.animateParticles();
      this.renderer.render(this.scene, this.camera);
    },
  },
  mounted() {
    this.initScene();
    this.animate();
  },
};
</script>

<style scoped>
#app {
  position: relative;
}

.controls {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;
  color: white;
}

.winner {
  font-size: 24px;
  margin-top: 20px;
  color: yellow;
}

.prizes {
  font-size: 16px;
  color: white;
}

button {
  padding: 10px 20px;
  margin: 5px;
  background-color: #008cba;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #005f72;
}

.webgl-canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
</style>
